<template>
  <div>
    <div class="right xwzx">
      <div class="title">
        <p>志愿者招募</p>
      </div>

      <div class="title_top">
        <ul class="list_ul">
          <li
            style="  cursor: pointer;"
            v-for="(item, index) of currentPageData"
            :key="index"
            @click="tozhaomudetail(item.id)"
          >{{ item.title }}</li>
        </ul>
      </div>
    </div>
    <div id="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :pager-count="5"
        :page-size="pageSize"
        layout="  prev, pager, next"
        :total="totalRow"
      ></el-pagination>
    </div>
    <!-- <foot2></foot2> -->
  </div>
</template>
<script>
// import foot2 from "../../components/foot2";
export default {
  data() {
    return {
      message: { metadata: [{ value: "" }] },
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 10, // 每页显示数量
      currentPageData: [], //当前页显示内容
      totalRow: 0,
    };
  },
  mounted() {
    this.setCurrentPageData();
  },

  methods: {
    tozhaomudetail(id) {
      this.$router
        .push({
          path: `/zhidujianshe/zhiyuanzhezhaomudetail?id=${id}`,
          query: { orderId: "志愿者招募", sort: 59 },
        })
        .catch((err) => {
          err;
        });
    },
    setCurrentPageData() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.$api
        .get(
          `${this.tableList}zhiyuanzhezhaomu-${this.currentPage}-${this.pageSize}`
        )
        .then((res) => {
          // 计算一共有几页
          this.totalRow = res.data.page.totalRow;
          this.currentPageData = res.data.page.list;
        });
    },
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
      }

      // this.page = val;
      this.setCurrentPageData(
        `${this.tableList}zhiyuanzhezhaomu-${this.currentPage}-${this.pageSize}`
      );
    },
  },
};
</script>
<style scoped>
.gwgk.content {
  display: flex;
  justify-content: space-between;

  max-width: 1200x;

  font-size: 24px;
  margin: auto;
  line-height: 40px;

  box-sizing: border-box;
  padding-bottom: 200px;
}
.gwgk .title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: rgb(107, 128, 173);
  margin-bottom: 50px;
}
.title > p {
  margin-bottom: 10px;
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}

.gwgk .right {
  width: 980px;
  padding: 0 30px 0;

  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gwgk .blue {
  color: rgb(25, 67, 119);
}
.zs_k {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.bread {
  max-width: 1150px;
  margin: auto;
  height: 60px;
}
.list_ul {
}
.list_ul {
  margin-bottom: 60px;
  padding-left: 15px;
}
.list_ul li {
  border-bottom: 1px solid gray;
  padding: 10px 0px;
  font-size: 16px;
}

/* fenye */
#page {
  text-align: center;
  margin-top: 65px;
  margin-bottom: 80px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 25px;
  height: 25px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
